import {
  NGrid,
  NGridItem,
  NCard,
  NTree,
  TreeOption,
  NIcon,
  NLayout,
} from "naive-ui";
import { repeat } from "seemly";
import { ChevronRight48Regular } from "@vicons/fluent";
export default defineComponent({
  name: "Department",
  setup() {
    function createData(level = 4, baseKey = ""): TreeOption[] | undefined {
      if (!level) return undefined;
      return repeat(6 - level, undefined).map((_, index) => {
        const key = "" + baseKey + level + index;
        return {
          label: createLabel(level),
          key,
          children: createData(level - 1, key),
        };
      });
    }
    function createLabel(level: number): string {
      if (level === 4) return "道生一";
      if (level === 3) return "一生二";
      if (level === 2) return "二生三";
      if (level === 1) return "三生万物";
      return "";
    }
    let treeData = createData();
    const renderSwitcherIcon = () => {
      return h(NIcon, null, { default: () => h(ChevronRight48Regular) });
    };
    return () => (
      <div class=" h-full flex flex-col margin-t-10 overflow-hidden">
        <NGrid xGap={10} yGap={10} cols={6} class="h-full">
          <NGridItem span={2}>
            <NCard
              bordered={false}
              title="部门"
              style="height:100%;"
              headerStyle={{
                padding: "10px",
                fontSize: "14px",
              }}
              contentStyle={{
                padding: "10px",
                position: "relative",
              }}
            >
              <NLayout
                nativeScrollbar={false}
                position="absolute"
                style="background:none;"
              >
                <NTree
                  blockLine
                  selectable
                  data={treeData}
                  renderSwitcherIcon={renderSwitcherIcon}
                />
              </NLayout>
            </NCard>
          </NGridItem>
          <NGridItem span={4}>
            <NCard
              bordered={false}
              title="部门员工"
              style="height:100%;"
              headerStyle={{
                padding: "10px",
                fontSize: "14px",
              }}
              contentStyle={{
                padding: "10px",
                position: "relative",
              }}
            >
              <NLayout
                nativeScrollbar={false}
                position="absolute"
                style="background:none;"
                contentStyle={{
                    padding: "10px",
                  }}
              >
                部门员工
              </NLayout>
            </NCard>
          </NGridItem>
        </NGrid>
      </div>
    );
  },
});
